<template>
    <div id="video-container">

        <div class="video-panel">
            <div class="video-top">
            </div>
            <div class="video-player">
                <video id="media" @click="play" :src="src.path" preload></video>
            </div>

            <videoBar></videoBar>

            <!--<div class="video-progress">-->
                <!--<div class="video-progress-bar" @mousemove="move" @click="click">-->
                <!--<span class="bar bar1" :style="{width: progress.time}">-->
                    <!--<span class="bar-point"></span>-->
                <!--</span>-->
                    <!--<span class="bar bar2" :style="{width: progress.load}"></span>-->
                    <!--&lt;!&ndash;<span class="bar-point" :style="{left: progress.time}"></span>&ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="video-bar">-->
                <!--<span class="video-bar-item" @click="play()"><i class="iconfont" :class="player.icon"></i></span>-->
                <!--<span class="video-bar-item" @click="getNextVideo(1)"><i class="iconfont icon-xiayishou"></i></span>-->
                <!--<span class="video-bar-item">{{dataUtil.formatTime(progress.currentTime)}} / {{dataUtil.formatTime(progress.duration)}}</span>-->

                <!--<span class="video-bar-item right"><i class="iconfont icon-yinliang"></i></span>-->
                <!--<span class="video-bar-item right"><i class="iconfont icon-weibiaoti103"></i></span>-->
                <!--<span class="video-bar-item right"><i class="iconfont icon-fangda"></i></span>-->
                <!--<span class="video-bar-item right"><i class="iconfont icon-quanping"></i></span>-->
            <!--</div>-->
            <!--<div class="video-bottom">-->
            <!---->
            <!--</div>-->
        </div>



    </div>
</template>

<script>
    'use strict';

    import {baseUtil} from "../../common/js/BaseUtil";
    import videoBar from './v-video-bar';

    export default {
        name: "Player",
        components: {videoBar},
        props: {},
        data() {
            return {
                baseUtil: baseUtil,
                dataUtil: baseUtil.getDateUtil(),

                // 媒体播放器
                media: null,

                progress: {
                    currentTime: 0,
                    duration: 0,
                    time: '50%',
                    load: '60%',
                    move: 0,
                },
                src:{
                    vid: 0,
                    name: "",
                    path: "",
                    pathArray: [
                        {vid: 1, name: '视频1', path: 'http://127.0.0.1:18080/file/video_demo.mp4'},
                        {vid: 2, name: '视频2', path: 'http://127.0.0.1:18080/file/video_demo2.mp4'},
                    ],
                },
                player: {
                    iconArray: ['icon-play','icon-zanting'],
                    icon: 'icon-play',
                    loop: null,
                }
            }
        },
        computed: {},
        methods: {
            /**
             * 移动进度条事件
             * @param event
             * @return {Integer}
             */
            move(event) {
                // 当前移动到的位置
                this.progress.move = event.offsetX;
                // 获取播放器容器的宽度
                let maxWidth = document.getElementById("video-container").offsetWidth * 0.98;
                // console.log(maxWidth);
                // let p = this.progress.move / event.target.clientWidth;
                let p = this.progress.move / maxWidth;
                let time = this.progress.duration * p;
                // let formatTime = this.dataUtil.formatTime(time);
                // console.log()
                return time;
            },
            /**
             * 点击进度条事件
             * @param event
             */
            click(event) {
                let time = this.move(event);
                // let formatTime = this.dataUtil.formatTime(time);
                this.media.currentTime = time;
                this.checkProgress(time);
            },
            /**
             * 获取播放器
             * @returns {HTMLElement}
             */
            getMedia() {
                return document.getElementById("media");
            },
            /**
             * 初始化播放器
             * @returns {HTMLElement}
             */
            initMedia() {
                let media = this.getMedia();
                // 获取资源
                let loop = setInterval(() => {
                    if(this.media.readyState === 4) {
                        this.progress.duration = this.media.duration;
                        clearInterval(loop);
                        this.checkProgress(0);
                    }
                });
                return media;
            },
            /**
             * 获取播放信息
             */
            getMediaInfo(media = this.media) {
                if(!media) {
                    console.log("暂无媒体播放器");
                    return;
                }
                console.log('---------------------------------------------');
                console.log('资源地址：' + media.currentSrc);
                console.log(media.networkState);
                console.log('播放位置：' + media.currentTime);
                console.log('播放速度：' + media.playbackRate);
                console.log('时长：' + media.duration);
                console.log('是否暂停：' + media.paused);
                console.log(media.buffered);
                console.log(media.preload);
                console.log('音量：' + media.volume);
                console.log('已经播放的区域：',media.played);
            },
            /**
             * 播放
             */
            play() {
                // let media = this.getMedia();
                // this.getMediaInfo(this.media);
                if(this.media.networkState === 3) {
                    this.$message.error('资源未找到');
                    return;
                }
                if(this.media.paused) {
                    this.media.play();
                    this.checkProgress(this.media.currentTime);
                    this.loop = setInterval(() => {
                        this.checkProgress(this.media.currentTime);
                        // console.log('已经播放的区域：',media.played);
                        if(this.media.ended) {
                            if(this.media.loop) {
                                this.$message.warning("5秒后开始重新播放");
                                setTimeout(() => {
                                    this.media.play();
                                }, 5000);
                            }
                            clearInterval(this.loop);
                            this.media.pause();
                            this.media.currentTime = 0;
                            this.player.icon = this.player.iconArray[0];
                        }
                    }, 100);
                    this.player.icon = this.player.iconArray[1];
                }else {
                    clearInterval(this.loop);
                    this.media.pause();
                    this.player.icon = this.player.iconArray[0];
                }
            },
            /**
             * 校验播放进度
             */
            checkProgress(currentTime) {
                this.progress.currentTime = currentTime;
                this.progress.time = (currentTime / this.media.duration * 100) + "%";
            },
            /**
             * 初始化
             */
            initVideoArray() {
                this.src.pathArray.forEach((map, index) => {
                    this.src.pathArray[index]['index'] = index;
                });

            },
            /**
             * 获取下一个视频
             */
            getNextVideo(index = 0) {
                if(this.src.pathArray.length > index) {
                    let src = this.src.pathArray[index];
                    this.src.vid = src.vid;
                    this.src.name = src.name;
                    this.src.path = src.path;
                }
                // 获取媒体播放器
                this.media = this.initMedia();
            }
        },
        created() {

        },
        mounted() {
            // 初始化
            this.initVideoArray();
            // 获取下一个视频资源
            this.getNextVideo(1);
        }
    }

</script>

<style lang="scss" scoped>

    @import '../../common/css/theme.sass';
    // 进度条宽度
    $barWidth: 98% 100%;
    // 进度条高度
    $barHeight: 2px 4px;
    // 0.1s的匀速动画
    $linearAnimation: linear 0.1s;

    #video-container{
        margin: 0 auto;
        width: 100%;
        min-width: 1200px;
        /*max-width: 50%;*/
        /*margin: 0 auto;*/
        overflow: hidden;

        div.video-panel{
            position: relative;
            width: 100%;
            background-color: black;

            &>div.video-top{

            }

            &>div.video-player{
                margin: 0 1%;
                width: nth($barWidth, 1);
                padding: 45px 0 50px;
                video{
                    width: 100%;
                }
            }

            &:hover {
                div.video-progress-bar{
                    margin: 1px (100% - nth($barWidth, 1)) / 2;
                    width: nth($barWidth, 1);
                    bottom: 45px;
                    &>span.bar1>span.bar-point{
                        top: nth($barHeight, 1) / -2;
                        width: nth($barHeight, 1) * 2;
                        height: nth($barHeight, 1) * 2;
                        border-radius: 50%;
                    }
                }
                div.video-bar{
                    bottom: 0;
                }
            }

            div.video-progress-bar{
                cursor: pointer;
                margin: 1px (100% - nth($barWidth, 2)) / 2;
                position: absolute;
                width: nth($barWidth, 2);
                height: nth($barHeight, 1);
                border-radius: nth($barHeight, 1) / 2;
                /*overflow: hidden;*/
                bottom: 0;
                background-color: $themeGray;

                transition: bottom 0.4s, height #{$linearAnimation}, width #{$linearAnimation}, margin #{$linearAnimation};

                &:hover {
                    height: nth($barHeight, 2);
                    border-radius: nth($barHeight, 2) / 2;
                    &>span{
                        &.bar{
                            border-radius: nth($barHeight, 2) / 2;
                            height: nth($barHeight, 2);

                            &>span.bar-point{
                                top: nth($barHeight, 2) / -2;
                                width: nth($barHeight, 2) * 2;
                                height: nth($barHeight, 2) * 2;
                                /*border-radius: nth($barHeight, 2);*/
                            }

                        }

                    }
                }

                &>span{
                    display: inline-block;
                    position: absolute;
                    &.bar{
                        border-radius: nth($barHeight, 1) / 2;
                        width: 100%;
                        height: nth($barHeight, 1);
                        &.bar1{
                            z-index: 100;
                            background-color: $themeColor;
                        }
                        &.bar2{
                            z-index: 99;
                            background-color: $themeGray;
                        }
                        &>span.bar-point{
                            display: inline-block;
                            position: absolute;
                            z-index: 101;
                            top: 0;
                            right: 0;
                            width: nth($barHeight, 1);
                            height: nth($barHeight, 1);
                            border-radius: 0;
                            background-color: white;
                            transition: left #{$linearAnimation}, top #{$linearAnimation},width #{$linearAnimation},height #{$linearAnimation}, border-radius #{$linearAnimation};
                        }
                        transition: width #{$linearAnimation}, height #{$linearAnimation};
                    }

                }

            }

            div.video-bar{
                position: absolute;
                bottom: -45px;
                width: nth($barWidth, 1);
                height: 45px;
                background-color: transparent;
                color: white;
                display: flex;

                transition: bottom 0.4s;

                &>span.video-bar-item{
                    justify-content: flex-start;
                    /*justify-content: left;*/
                    /*display: inline-block;*/
                    margin: 0;
                    padding: 2px 15px;
                    cursor: pointer;
                    line-height: 40px;
                    height: 100%;

                    &>i{
                        font-size: 20px;
                        /*font-weight: bold;*/
                    }

                    &.left{
                        justify-content: flex-start;
                    }

                    &.right{
                        justify-content: flex-end;
                    }

                    &:hover{
                        color: $themeColor;
                    }
                }

            }

        }
    }

</style>
